<template>
  <div class="index">
    <lyhHeader></lyhHeader>
    <Swiper></Swiper>

    <div class="bd">
        <ul>
          <li @click="goCompany(index)" v-for="(item, index) in companylist" v-bind:key="item.companyId" :style="{backgroundImage:'url('+item.companyLogo+')'}"></li>
        </ul>

    </div>

  </div>
</template>

<script>
import lyhHeader from '@/components/Header.vue'
import Swiper from '@/components/Swiper.vue'
import ajax from '@/ajax/ajax.js'
export default {
  name: 'hall',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      companylist: []
    }
  },
  components: {lyhHeader, Swiper},
  methods: {
    goCompany (index) {
      this.$router.push({ name: 'Company', params: {id: index} })
    }
  },
  created () {
    console.log('swiper created')
    ajax.post('getcompanylist', {}).then(data => {
      this.companylist = data.items
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

    .swiper {
        height: 185px;
        background-color: #e1e1e1;
    }

    .bd {
        background-color: #ebebeb;
        padding: 20px 0;
        ul,li {
            margin: 0;
            padding: 0;
            background-color: #ebebeb;
            
        }
        li {
            margin: 0 auto;
            list-style: none;
            width: 260px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            // background-color: #fff;
            margin-bottom: 20px;
            border-radius: 5px;
            // box-shadow: #d8cdd3 3px 3px 9px;
            color: #cd0070;
            font-size: 16px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: left center;


            &:last-child {
                margin-bottom: 0;
            }
        }
    }

</style>
